<script>
import { GetSystemMenuApi } from '@/request/menu/menu-api'

export default {
  created () {
    this.getSystemMenu()
  },
  data () {
    return {
      systemMenuData: [],
      //展示匹配的字段
      defaultProps: {
        label: 'title',
        children: 'childItem'
      }
    }
  },
  methods: {
    async getSystemMenu () {
      this.systemMenuData=[]
      let res = await GetSystemMenuApi()
      if (res&&res.code === 200) {
        this.systemMenuData = res.data
      }
    },goto(data){
      if (!data.childItem) {
        this.$router.push(data.path)
      }
    }
  }

}
</script>

<template>
  <div class="over">
    <el-tree
        class="tree"
        :data="systemMenuData"
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
    >
      <span  class="custom-tree-node" slot-scope="{node,data}">
          <span @click="goto(data)">
             <e-icon :icon-name="data.icon"/>{{ data.title }}
          </span>
       </span>
    </el-tree>
  </div>

</template>

<style lang="less">
.e-icon{
  font-size: 12px;
  margin-right: 2px;
}
.over /deep/ {
  overflow-y: auto;
  .el-tree .custom-tree-node{
    font-size: 14px;
    &:hover{
      color: #409EFF;
    }
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }

  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree{
    height: 100%;
  }
  .el-tree-node:before {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #409EFF;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #409EFF;
    height: 20px;
    top: 12px;
    width: 18px;
  }

  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  .el-tree .el-icon-caret-right:before {
    content: "\e723";
    font-size: 16px;
    color: #1389BC;
    position: absolute;
    left: -16px;
    top: -8px;
  }

  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: "\e722";
    font-size: 16px;
    color: #1389BC;
    position: absolute;
    left: -16px;
    top: -8px;
  }

  .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 0;
  }
}

</style>
